<template>
	<mescroll-uni ref="mescrollRef" @init="mescrollInit" :up="upOption" :down="downOption" @up="upCallback" @down="downCallback" >
		<view class="notice-item" v-for="(item,index) in listdata" :key="index" @click="gotodetail(index)">
			<image :src="item.thumb" mode="aspectFill"></image>
			<view class="notice-info">
				<view class="notice-title">
				{{item.title}}
				</view>
				<view class="notice-intro eli">
					{{item.description}}
				</view>
				<view class="notice-time">
					{{item.add_time}}
				</view>
			</view>
		</view>
	</mescroll-uni>
</template>

<script>
	//公告列表页面
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default{
		mixins:[MescrollMixin],
		data(){
			return{
				listdata:[],
				downOption:{
					 use:true,
					auto:true,
					autoShowLoading:true
				},
				upOption:{
					auto:false,
					noMoreSize: 4, 
					empty:{
						tip: '~ 搜索无数据 ~',
						btnText: ''
					},
					textLoading: "玩命加载中...",
					textNoMore: "-- 人家是有底线的 --",
				}
			}
		},
		methods:{
			gotodetail(index){
				uni.navigateTo({
					url:this.listdata[index].url
				})
			},
			downCallback(e){
				this.mescroll.resetUpScroll()
			},
			
			upCallback(page){
				this.getinitdata(page.num).then(res => {
					console.log(res);
					this.mescroll.endSuccess(res.length);
					//设置列表数据
					if (page.num == 1) this.listdata = []; //如果是第一页需手动制空列表
					this.listdata = this.listdata.concat(res); //追加新数据 
				}).catch(error => {
					//联网失败, 结束加载
					this.mescroll.endErr();
					this.$ShowMsg('error::'+JSON.stringify(error))
					console.log(error)
				}) 
			},
			//获取列表数据
			getinitdata(pages) {
				return new Promise((resolve, reject) => {
					this.$HttRequest({
						url: '/notice/lists',
						param: {page: pages}
					}).then((res) => {
						console.log(res)
						if (res.status === 10000) {
							resolve(res.data.data);
						} else {
							this.$ShowMsg(res.message);
						}
					}).catch((error) => {
						//异常错误
						reject(error.errMsg);
					})
				})
			}
		}		
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5
	}
		.notice-item{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-radius: 20rpx;
			width: 90%;
			margin: 20rpx auto;
			background-color: #fff;
			box-shadow: 0 10rpx 10rpx #e6e6e6;
			image{
				width: 150rpx;
				height: 150rpx;
				border-radius: 20rpx;
				margin: 35rpx;
			}
			.notice-info{
				width: 62%;
				display: flex;
				justify-content:center ;
				align-items:  flex-start;
				color: #333;
				font-size: 30rpx;
				flex-direction: column;
				.notice-intro{
					color: #999;
					margin: 10rpx 0;
				}
				.eli {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 90%;
				}
				.notice-time{
					font-size: 22rpx;
					color: #c8c8c8;
				}
			}
		}
</style>
